/*** author: sailing date: 2020/4/14 *****/

<template>
  <div class="musicPage">
    <van-button @click="goback" type="info">back</van-button>
    <div class="nearbycontainer">
      <ul style="height:400px;overflow-y:scroll" class="nlist">
        <li  class="item" v-for="el in music_list">
          <p class="line">{{el.name}}</p>
          <p class="line">
            <dl @click="request(el)" class="lineMusic">
              <dt><img src="../../assets/music.png"/></dt>
              <dt class="get">GET</dt>
            </dl>
          </p>
        </li>
        <li class="musicchart">
          <div>连接状态: {{connect}} -- {{version}}</div>
          <chartpanel></chartpanel>
        </li>
      </ul>
    </div>
  </div>
</template>

<script lang="ts">
import { Component, Prop, Vue } from 'vue-property-decorator';
import Config from '../../server/config';
import socket from '../../server/socket';
import chartpanel from './chartpanel.vue';
import webrtc from '../../server/webrtc';
import eventBus from '../../server/eventBus';
@Component({
  components: {
    chartpanel,
  },
})
export default class Shake extends Vue {
  private music_list: any = [];
  private connect: String = '';

  private version:String = "0.0.1";
  public activated() {
    console.log('this.router:', this.$route);
    this.get_music(this.$route.params.username);
  }

  public request(el) {
    socket.sendMsg('message', {
      type: 'request_file',
      data: {
        to: this.$route.params.username,
        name: el.name,
        path: el.path,
      },
    });
  }

  public goback() {
    this.$router.back(-1);
  }

  public mounted() {
    const self = this;
    eventBus.$on('back_music_list', this.back_music_list); // 问完音乐之后返回音乐
    // console.log('webrtc 接收通道:', webrtc.sendChannel.readyState);
    setInterval(function() {
      self.connect = webrtc.sendChannel.readyState;
      console.log('webrtc 接收通道:', webrtc.sendChannel.readyState);
    }, 1000);
    // eventBus.$on("get_music_list", this.get_music_list.bind(this)); // 发送音乐
  }
  private get_music(to: string) {
    socket.sendMsg('message', {
      type: 'get_music_list',
      data: {
        to,
      },
    });
  }
  private back_music_list(data: any) {
    console.log('near_by:', data);
    const list = data.list.map((item) => {
      return item;
    });

    console.log('data.list:', list);
    this.music_list = list;
  }
}
</script>

<style scoped lang="scss">
.musicPage {
  background: #f3f3f3;
  width: 100%;
  height: 100%;
  position: absolute;
  .musicchart{
    position: absolute;
    background: #dadada;
    height: 500px;
    width: 100%;
    z-index: 1000;
  }
  .nearbycontainer {
    margin-top: 20px;
    width: 100%;
    .nlist {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-around;
      .item {
        min-height: 50px;
        background: #fff;
        padding: 10px;
        font-size: 12px;
        text-align: left;
        width: 38%;
        margin-bottom: 10px;
        .line{
          margin-top:10px;
        }
        .lineMusic{
          display: flex;
          justify-content: space-between;
          .get{
            background: #c3c308;
            width: 40px;
            border-radius: 10px;
            text-align: center;
            color:#fff;
            height: 23px;
            margin-top: 10px;
            padding-top: 10px;
          }
          img{
            width: 40px;
            margin-top:5px;
            height: 40px;
          }
        }
        
        .user {
          width: 60px;
          height: 60px;
          border: 2px solid #fff;
          box-shadow: 1px 4px 20px #000;
          border-radius: 50%;
          img {
            height: 60px;
            width: 60px;
            border-radius: 60px;
          }
        }
      }
    }
  }
}
</style>
